<template>
		<div id="five" style="width:100%;height:90%;"></div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'five',
  props: ['five'],
  data () {
    return {
      // 页面查询数据
      data: [],
      title: '',
      areaData: [],
      queryData: {
        selectArea: 0,
        date: []
      },
      myChart: null,
      option: {

      }
    }
  },
  mounted () {
    // setTimeout(() => {
    // 	this.hadleGetFilesListApi();
    // })
  },
  methods: {
    getData () {
      const that = this
      QingYunApi.getGhouseAir(that.queryData)
        .then(res => {
          that.data = res.data
          that.hadleGetFilesListApi()
        })
    },
    getAreaData () {
      const that = this
      IotAreaApi.getAll()
        .then(res => {
          that.areaData = res.data
          that.queryData.selectArea = that.areaData[0].id
          that.getData()
        })
      that.getData()
    },

    hadleGetFilesListApi (x) {
      const option = {
        title: {
          text: this.title,
          textStyle: {
            // color: '#FFFFFF',
            fontSize: 25
          }
          // x:'right',
          // y:'center'
        },

        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },

        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {

          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        dataset: {
					        source: x
          // source:[
					  //           ['product', '小区1', '小区2','小区3','小区4','小区5'],
					  //           ['一月', 43.3, 85.8, 93.7,55,64],
					  //           ['二月', 83.1, 73.4, 55.1,56,21],
					  //           ['三月', 86.4, 65.2, 82.5,55,14],
					  //           ['四月', 72.4, 53.9, 39.1,44,52],
					  //           ['五月', 24, 539, 391,44,52],
					  //           ['六月', 74, 539, 391,44,52],
					  //           ['七月', 72, 539, 391,44,52],
					  //           ['八月', 75, 539, 391,44,52],
					  //           ['九月', 70, 539, 391,44,52],
					  //           ['十月', 79, 539, 391,44,52],
					  //           ['十一月', 78, 539, 391,44,52],
					  //           ['十二月', 54, 539, 391,44,52],
					  //       ],

					    },
					 xAxis: {
          type: 'category',
          splitLine: {
            show: false
          },

          axisLabel: {
            show: true,
            textStyle: {
              // color: '#c3dbff',  //更改坐标轴文字颜色
              fontSize: 16 // 更改坐标轴文字大小
            }
          },
          axisLine: {
            lineStyle: {
              // color: '#FFFFFF',
              width: 1
            }
          }
					 },
					 yAxis: {
						 min: 0,
						 max: 100

					 },
					    // Declare several bar series, each will be mapped
					    // to a column of dataset.source by default.
        series: [
					        { type: 'bar' },
					        { type: 'bar' },
					        { type: 'bar' },
					        { type: 'bar' },
					        { type: 'bar' }
        ]

      }
      let myChart = this.$echarts.init(document.getElementById('five'))
      myChart.setOption(option)
      window.addEventListener('resize', function () {
				    myChart.resize()
      })
    }
  },
  watch: {
    five (newval, oldval) {
      this.title = newval.type
      var data = []
      var data0 = ['product']
      var data1 = ['一月']
      var data2 = ['二月']
      var data3 = ['三月']
      var data4 = ['四月']
      var data5 = ['五月']
      var data6 = ['六月']
      var data7 = ['七月']
      var data8 = ['八月']
      var data9 = ['九月']
      var data10 = ['十月']
      var data11 = ['十一月']
      var data12 = ['十二月']

      for (var i = 0; i < newval.list.length; i++) {
        data0[i + 1] = newval.list[i].areaName
        data1[i + 1] = newval.list[i].january
        data2[i + 1] = newval.list[i].february
        data3[i + 1] = newval.list[i].march
        data4[i + 1] = newval.list[i].april
        data5[i + 1] = newval.list[i].may
        data6[i + 1] = newval.list[i].june
        data7[i + 1] = newval.list[i].july
        data8[i + 1] = newval.list[i].august
        data9[i + 1] = newval.list[i].september
        data10[i + 1] = newval.list[i].october
        data11[i + 1] = newval.list[i].november
        data12[i + 1] = newval.list[i].december
      }
      data.push(data0)
      data.push(data1)
      data.push(data2)
      data.push(data3)
      data.push(data4)
      data.push(data5)
      data.push(data6)
      data.push(data7)
      data.push(data8)
      data.push(data9)
      data.push(data10)
      data.push(data11)
      data.push(data12)
      this.hadleGetFilesListApi(data)
    }
  }
}
</script>
